<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>工作日历</title>
<meta name="description" content="Restyling jQuery UI Widgets and Elements" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<style>
		#but {
		    background-color: #1C86EE;
		    border: none;
		    color: white;
		    padding: 3px 32px;
		    text-align: center;
		    text-decoration: none;
		    display: inline-block;
		    font-size: 16px;
		    margin: 18px 2px;
		    cursor: pointer;
		}
		#but:hover {
		    background-color: #4CAF50; /* Green */
		    color: white;
		}
	</style>
	<link rel="stylesheet" href="../../TopJUI/assets/css/bootstrap.min.css" />
	<link rel="stylesheet" href="../../TopJUI/assets/css/font-awesome.min.css" />
	<link rel="stylesheet" href="../../TopJUI/assets/css/fullcalendar.css" />
	<link rel="stylesheet" href="../../TopJUI/assets/css/ace.min.css" />
	<!-- layer的css -->
	<link rel="stylesheet" href="../../TopJUI/fullcalendar/layer/theme/default/layer.css" />
	<script src="../../TopJUI/assets/js/ace-extra.min.js"></script>
	<script src='../../TopJUI/assets/js/jquery-2.0.3.min.js'></script>
	<script src="../../TopJUI/assets/js/bootstrap.min.js"></script>
	<script src="../../TopJUI/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
	<script src="../../TopJUI/assets/js/fullcalendar.min.js"></script>
	<script src="../../TopJUI/assets/js/bootbox.min.js"></script>
	<!-- layer的js -->
	<script src="../../TopJUI/fullcalendar/layer/layer.js"></script>
	<script type="text/javascript">
		/* 文本域内容 */
		// var textAreaContent = null;
		jQuery(function($) {
			$('#external-events div.external-event').each(function() {
			var eventObject = {
				title: $.trim($(this).text()) 
			};
			$(this).data('eventObject', eventObject);
			$(this).draggable({
				zIndex: 999,
				revert: true,      
				revertDuration: 0  
			});
		});
		/* initialize the calendar
		-----------------------------------------------------------------*/
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		var calendar = $('#calendar').fullCalendar({
			 buttonText: {
				prev: '<i class="icon-chevron-left"></i>',
				next: '<i class="icon-chevron-right"></i>'
			},
		
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			events: [
			{
				title: '1.开发重庆仓储系统',
				start: new Date(y, m, 1),
				className: 'label-important',
				textColor: 'white',
				color:'#C67171'
			},
			{
				title: '1.开发MES系统',
				start: new Date(y, m, d-3, 16, 0),
				allDay: false
			}],
			editable: true,
			droppable: true, 
			drop: function(date, allDay) { 
				var originalEventObject = $(this).data('eventObject');
				var $extraEventClass = $(this).attr('data-class');
				var copiedEventObject = $.extend({}, originalEventObject);
				copiedEventObject.start = date;
				copiedEventObject.allDay = allDay;
				if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];
				$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
				if ($('#drop-remove').is(':checked')) {
					$(this).remove();
				}
			},
			selectable: true,
			selectHelper: true,
			dayClick: function (date, allDay, jsEvent, view) {
				// var sb = $.fullCalendar.formatDate(date, "yyyy-MM-dd");
				// alert(sb);
				/* layer.open({
					  type: 1,
					  skin: 'layui-layer-rim', // 加上边框
					  area: ['530px', '395px'], // 宽高
					  content: '<center>'+
									'<label style="color:gray">添加我的工作日志</label>'+
								'</center>'+
								'<textArea id="textAr" value="输入框" style="width:504px;height:220px;margin-left:5px">'+
						
								'</textArea>'+
								'<center>'+
									'<button id="but" name="but" value="确定" style="width:100px;height:45px;" onclick="clickEvent()">确定</button>'+
								'</center>'
				}) */
				var obj = new Object();
	            obj.title = "请点击添加/编辑事件";               
	            // obj.description = data[i].description; 
	            textColor: "white",
	            obj.color = "#C67171";  
	            // obj.remindertime = $.fullCalendar.parseDate(data[i].remindertime);  
	            // obj.messagenotice = data[i].messagenotice;  
	            // obj.description = data[i].description;  
	            obj.start = date; 
				$("#calendar").fullCalendar('renderEvent',obj,true); 
			},
			/* ***********************页面加载时执行此方法，将数据显示到表格中***************************** */
			/* events : function(start, end, callback) {
				$.ajax({
					url : '${pageContext.request.contextPath}/itemUserH/select.do?staffid='
							+ $("#staffid").val(),
					type : 'post',
					data : {},
					success : function(data) {
						var events = [];
						for ( var i = 0; i < data.length; i++) {
							events.push({
								id : data[i].id, //显示标题的id
								title : data[i].taskcontent, //显示的内容
								start : data[i].endtime, //日历上显示的开始时间
								end : data[i].endtime
							//日历上显示的结束时间
							});
						}
						callback(events);
					},
					error : function() {
						alert("服务器异常，请联系管理员");
					}
				});
			}, */
			/* **************************************************** */
			/* ***********************点击每日的空格弹框事件************** */
			/* select: function(start, end, allDay, view) {
				// var sb = $.fullCalendar.formatDate(view.end, "yyyy-MM-dd HH:mm:ss");
				alert(view.name);
				layer.open({
					  type: 1,
					  skin: 'layui-layer-rim', //加上边框
					  area: ['630px', '510px'], //宽高
					  content: '<center>'+
									'<label style="color:gray">添加我的工作日志</label>'+
								'</center>'+
								'<textArea id="textAr" value="输入框" style="width:604px;height:360px;margin-left:5px">'+
						
								'</textArea>'+
								'<center>'+
									'<button id="but" name="but" value="确定" style="width:100px;height:30px;" onclick="clickEvent()">确定</button>'+
								'</center>'
				})
				
			}, */
			/* **************************************************** */
			/* 点击每日的框后弹出的框(原生) */
			/* dayClick: function(start, end, allDay) {
				bootbox.prompt("添加事件:", function(title) {
					if (title !== null) {
						calendar.fullCalendar('renderEvent',
							{
								title: title,
								start: start,
								end: end,
								allDay: allDay
							},true // make the event "stick"
						);
					}
				});
				calendar.fullCalendar('unselect');
		    }, */
		    /* **************************************************** */
			/* 编辑事件的一些js */
			eventClick: function(calEvent, jsEvent, view) {
				var form = $("<form class='form-inline' style='height:140px'><center><label><font color='#36648B' size='7px'>添加/编辑事件：</font></label></center><br></form>");
				form.append("<input style='margin-left:100px;width:320px' class='middle' id='sba' autocomplete=off type='text' value='" + calEvent.title + "'/>");
				form.append("<button type='submit' class='btn btn-sm btn-success'><i class='icon-ok'></i>保存</button>");
				var div = bootbox.dialog({
					message: form,
					buttons: {
						"delete" : {
							"label" : "<i class='icon-trash'></i>点击删除事件",
							"className" : "btn-sm btn-danger",
							"callback": function() {
								calendar.fullCalendar('removeEvents' , function(ev){
									return (ev._id == calEvent._id);
								})
							}
						},
						"close" : {
							"label" : "<i class='icon-remove'></i>取消修改",
							"className" : "btn-sm"
						} 
					}
				});
				form.on('submit', function(){
					calEvent.title = form.find("input[type=text]").val();
					// alert($("#sba").val());
					calendar.fullCalendar('updateEvent', calEvent);
					div.modal("hide");
					return false;
				});
			}
		});
	})
	
	/* 
		function clickEvent(){
			// textAreaContent = $("#textAr").val();
			// console.log($("#textAr").val());
			layer.closeAll();
			textAreaContent = "";
		} 
	*/
</script>
</head>
<body class="no-skin">
	<div class="main-container" id="main-container">
		<div class="main-content">
			<div class="page-content">
				<div class="page-content-area">
					<div class="row">
						<h1 align="center">我的工作日志</h1>
						<div class="col-xs-12">
							<div class="row" style="margin-left: 400px">
								<div class="col-sm-9">
									<div id="calendar"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>